<template>
  <div class="layout">
    <Head/>
    <div class="layout-content">
      <router-view name="aside" v-if="asideMenus&&asideMenus.length" :aside="asideMenus"></router-view>
      <div class="main-group">
        <router-view name="topaside" v-if="topAsideMenus&&topAsideMenus.length" :aside="topAsideMenus"></router-view>
        <Main v-if="isRouterAlive"/>
      </div>
    </div>
  </div>
</template>

<script>
import Head from "./layout/Head.vue";
import Main from "./layout/Main.vue";

export default {
  name: 'Layout',
  components: {Main, Head},
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true
    };
  },
  created() {


  },
  mounted() {

  },
  computed: {
    asideMenus() {
      let datas = this.$route.meta.aside || []
      return datas.filter(item => {
        return item.hidden !== true
      })
    },
    topAsideMenus() {
      let datas = this.$route.meta.topAside || []
      return datas.filter(item => {
        return item.hidden !== true
      })
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    }
  },
};
</script>

<style lang="less" scoped>
  .layout {
    background: url(../assets/img/indexHome/index-background.png) 0 0 no-repeat;
    overflow: hidden;
    background-size: 100% 100%;
    font-size: 14px;
    height: 100%;
    display: flex;
    flex-direction: column;

    .layout-content {
      flex: 1;
      display: flex;
      overflow: hidden;
    }

    .main-group {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
  }
</style>
